<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div#box{
				text-align: center;
			}
			div#box div#btn{
				margin: auto;
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: #ddd;
				border-radius: 100%;
				color: #fff;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="btn">开</div>
			<img id="img" src="../img/pic_bulboff.gif"/>
		</div>
	</body>
	<script type="text/javascript">
		(function(){
			var btn = document.querySelector("#btn");
			var img = document.querySelector("#img");
			btn.onclick = function(){
				console.log(this);
				if(this.innerHTML == "开"){
					img.src = "../img/pic_bulbon.gif";
					this.innerHTML = "关";
					this.style.backgroundColor = "green";
				}else{
					img.src = "../img/pic_bulboff.gif";
					this.innerHTML = "开";
					this.style.backgroundColor = "#ddd";
				}
			}
		}());
	</script>
</html>
